<template>
  <Form :data="model" @ok="onOk">
    <FormItem field="name" title="名称" required>
      <Input v-model="model.name" />
    </FormItem>
    <FormItem field="value" title="字典值" required>
      <Input v-model="model.value" />
    </FormItem>
    <FormItem field="nameEn" title="英文名">
      <Input v-model="model.nameEn" />
    </FormItem>
    <FormItem field="remark" title="备注">
      <Input v-model="model.remark" />
    </FormItem>
    <FormItem field="sort" title="排序">
      <Input-number v-model="model.sort" />
    </FormItem>
    <template #op>
      <ModalButton :loading="loading" />
    </template>
  </Form>
</template>

<script setup>
import { ModalButton, Form, FormItem, Input, InputNumber, Message } from '@idmy/ui'
import { useLoading } from '@idmy/core'
import { reactive } from 'vue'
import { createOrUpdateDict } from './services'

const props = defineProps({ model: Object })

const model = reactive({ ...props.model })

const [onOk, loading] = useLoading(async () => {
  await createOrUpdateDict(model)
  Message.success('保存成功')
  Modal.ok(model)
})
</script>
